import React, { useState, useEffect } from 'react'
import { Col, Form, Input, Button, Table, Select, DatePicker, Row } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import RenderButtom from '@/components/RenderButton'
import SearchBox from '@/components/SearchBox'
import { getAfterSaleOrderList } from '@/services/order/afterSale'

const { Option } = Select

const { RangePicker } = DatePicker

import { router } from 'umi'

// 表头
const columns = [
  {
    title: '申请单号',
    dataIndex: 'applyNo',
    key: 'applyNo',
    align: 'center',
  },
  {
    title: '订单号',
    dataIndex: 'orderNo',
    key: 'orderNo',
    align: 'center'
  },
  {
    title: '下单时间',
    dataIndex: 'createTime',
    key: 'createTime',
    align: 'center'
  },
  {
    title: '支付时间',
    dataIndex: 'auditTime',
    key: 'auditTime',
    align: 'center'
  },
  {
    title: '商品名称',
    dataIndex: 'amdOrderDetailInfo.goodsName',
    key: 'amdOrderDetailInfo.goodsName',
    align: 'center'
  },
  {
    title: '商品单价',
    dataIndex: 'amdOrderDetailInfo.goodsPrice',
    key: 'amdOrderDetailInfo.goodsPrice',
    align: 'center'
  },
  {
    title: '数量',
    dataIndex: 'amdOrderDetailInfo.goodsNums',
    key: 'amdOrderDetailInfo.goodsNums',
    align: 'center'
  },
  {
    title: '实付金额',
    dataIndex: 'amdOrderInfo.actualPrice',
    key: 'amdOrderInfo.actualPrice',
    align: 'center'
  },
  {
    title: '收货人',
    dataIndex: 'amdOrderInfo.userName',
    key: 'amdOrderInfo.userName',
    align: 'center'
  },
  {
    title: '收货电话',
    dataIndex: 'amdOrderInfo.userPhone',
    key: 'amdOrderInfo.userPhone',
    align: 'center'
  },
  // {
  //   title: '购买人',
  //   dataIndex: 'amdOrderInfo.userName',
  //   key: 'amdOrderInfo.userName',
  //   align: 'center'
  // },
  // {
  //   title: '购买人电话',
  //   dataIndex: 'amdOrderInfo.userPhone',
  //   key: 'amdOrderInfo.userPhone',
  //   align: 'center'
  // }
]

const AfterSale = props => {
  const { form } = props
  const { getFieldDecorator } = form
  const [total, setTotal] = useState(1)
  const [pageNo, setPageNo] = useState(1)
  const [pageSize, setPageSize] = useState(10)
  const [record, setRecord] = useState({})
  const [startOrderTime, setStartOrderTime] = useState('')
  const [endOrderTime, setEndOrderTime] = useState('')
  const [orderList, setOrderList] = useState([])
  const [statusList, setStatuasList] = useState([
    {
      id: 'AUDIT_WAIT',
      name: '待审核'
    },
    {
      id: 'AUDIT_PASS',
      name: '审核通过'
    },
    {
      id: 'AUDIT_NO_PASS',
      name: '审核不通过'
    }
  ])

  const rowSelection = {
    type: 'radio',
    onChange: (selectedRowKeys, selectedRows) => {
      setRecord(selectedRows)
      // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
      console.log(record)
    },
  }

  useEffect(() => {
    init()
  }, [])
  const init = async () => {
    let params = {
      pageNo,
      pageSize
    }
    await getAfterSaleOrderLists(params)
  }
  // 表单查询
  const handleSearch = e => {
    e.preventDefault()
    form.validateFields(async (err, values) => {
      console.log('Received values of form: ', values)
      let params = {
        applyNo: values.applyNo,
        auditStatus: values.auditStatus,
        startOrderTime,
        endOrderTime,
        goodsName: values.goodsName,
        orderNo: values.orderNo,
        pageNo,
        pageSize,
        receiveName: values.receiveName,
        trafficNo: values.trafficNo,
        userName: values.userName
      }
      await getAfterSaleOrderLists(params)
    })
  }
  // 表单清空
  const handleReset = e => {
    form.resetFields();
  }
  // 查询条件
  const getFields = () => {
    return (
      <Row gutter={24}>
        <Col span={12}>
          <Form.Item label="申请单号" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
            {getFieldDecorator('applyNo', {})
              (<Input placeholder="请输入申请单号"/>)}
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item label="订单号" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
            {getFieldDecorator('orderNo', {})
              (<Input placeholder="请输入订单号"/>)}
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item label="商品名称" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
            {getFieldDecorator('goodsName', {})
              (<Input placeholder="请输入商品名称"/>)}
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item label="买家名字" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
            {getFieldDecorator('userName', {})
              (<Input placeholder="请输入买家名字"/>)}
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item label="收货人" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
            {getFieldDecorator('receiveName', {})
              (<Input placeholder="请输入收货人"/>)}
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item label="货物单号" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
            {getFieldDecorator('trafficNo', {})
              (<Input placeholder="请输入货物单号"/>)}
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item label="审核状态" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
            {getFieldDecorator('auditStatus', {})
              (<Select
                style={{ width: '100%' }}
                showSearch
                filterOption={(input, option) => option.props.children.indexOf(input) >= 0}
                placeholder="请选择"
              >
                {statusList && statusList.map(r => <Option key={r.id} value={r.id}>{r.name}</Option>)}
              </Select>)}
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item label="下单时间" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
            {getFieldDecorator('date', {})
              (<RangePicker onChange={selectData} />)}
          </Form.Item>
        </Col>
      </Row>
    )
  }
  // 按钮处理
  const handleBtn = type => {
    switch (type) {
      case 13:
        if (JSON.stringify(record) == "{}") return
        router.push({ pathname: '/order/orderDetail', query: { orderNo: record[0].applyNo, orderType: 'afterSale' } });
        break
    }
  }

  // 获取订单列表
  const getAfterSaleOrderLists = async (params) => {
    let res = await getAfterSaleOrderList(params)
    if (res.code === '0') {
      setOrderList(res.data)
      setTotal(res.iTotalDisplayRecords)
    } else {
      alert(res.msg)
    }
  }

  const pagination = {
    total: parseInt(total),
    onChange(page) {
      let params = {
        pageNo: page,
        pageSize
      }
      getAfterSaleOrderLists(params)
    }
  }
  // 选择时间
  const selectData = (date, dateString) => {
    setStartOrderTime(dateString[0])
    setEndOrderTime(dateString[1])
  }

  return (
    <PageHeaderWrapper>
      <SearchBox handleReset={handleReset} handleSearch={handleSearch} getFields={getFields} />
      <RenderButtom click={handleBtn} />
      <Table
        columns={columns}
        dataSource={orderList}
        rowKey={record => record.applyNo}
        pagination={pagination}
        rowSelection={rowSelection}
      />
    </PageHeaderWrapper>
  )
}

export default Form.create()(AfterSale)
